<template>
  <div>
    <Header></Header>
    <!--End Menu End-->
    <div class="i_bg bg_color">
      <div class="i_ban_bg">
        <!--Begin Banner Begin-->
        <div class="banner">
          <div class="top_slide_wrap">
            <ul class="slide_box bxslider">
              <li><img src="/static/images/ban1.jpg" width="740" height="401" /></li>
              <li><img src="/static/images/ban1.jpg" width="740" height="401" /></li>
              <li><img src="/static/images/ban1.jpg" width="740" height="401" /></li>
            </ul>
            <div class="op_btns clearfix">
              <a href="#" class="op_btn op_prev"><span></span></a>
              <a href="#" class="op_btn op_next"><span></span></a>
            </div>
          </div>
        </div>
        <!--End Banner End-->
        <div class="inews" >
          <div class="news_t">
            <span class="fr"><a href="#">更多 ></a></span>新闻资讯
          </div>
          <ul style="height: 500px">
            <li><span>[ 特惠 ]</span><a href="#">掬一轮明月 表无尽惦念</a></li>
            <li><span>[ 公告 ]</span><a href="#">好奇金装成长裤新品上市</a></li>
            <li><span>[ 特惠 ]</span><a href="#">大牌闪购 · 抢！</a></li>
            <li><span>[ 公告 ]</span><a href="#">发福利 买车就抢千元油卡</a></li>
            <li><span>[ 公告 ]</span><a href="#">家电低至五折</a></li>
            <li><span>[ 特惠 ]</span><a href="#">掬一轮明月 表无尽惦念11</a></li>
            <li><span>[ 公告 ]</span><a href="#">好奇金装成长裤新品上市11</a></li>
            <li><span>[ 特惠 ]</span><a href="#">大牌闪购 · 抢！</a></li>
            <li><span>[ 公告 ]</span><a href="#">发福利 买车就抢千元油卡</a></li>
            <li><span>[ 公告 ]</span><a href="#">家电低至五折</a></li>
          </ul>

        </div>
      </div>
      <!--Begin 热门商品 Begin-->
      <div class="content mar_10">
        <div class="h_l_img">
          <div class="img"><img src="/static/images/l_img.jpg" width="188" height="188" /></div>
          <div class="pri_bg">
            <span class="price fl">￥53.00</span>
            <span class="fr">16R</span>
          </div>
        </div>
        <div class="hot_pro">
          <div id="featureContainer">
            <div id="feature">
              <div id="block">
                <div id="botton-scroll">
                  <!--热卖商品循环标签开始-->
                  <ul class="featureUL">

                    <li class="featureBox" v-for="x in hotShop" >

                      <div class="box"  >
                        <div class="h_icon"><img src="/static/images/hot.png" width="50" height="50" /></div>
                        <div class="imgbg">
                          <a @click="toGoodsDetail(x)" ><img :src="x.goodsImg" width="160" height="136" /></a>
                        </div>
                        <div class="name">
                          <a href="#">
                              {{x.goodsName}}
                          </a>
                        </div>
                        <div class="price">
                          <font>￥<span>{{x.shopPrice}}</span></font> &nbsp; 26R
                        </div>
                      </div>
                    </li>

                  </ul>
                  <!--热卖商品循环标签结束-->
                </div>
              </div>
              <a class="h_prev" href="javascript:void();">Previous</a>
              <a class="h_next" href="javascript:void();">Next</a>
            </div>
          </div>
        </div>
      </div>

      <div class="content mar_20">
        <img src="/static/images/mban_1.jpg" width="1200" height="110" />
      </div>
      <!--Begin 男装 Begin-->
      <div class="i_t mar_10">
        <span class="floor_num">1F</span>
        <span class="fl">男 <b>·</b> 装</span>

      </div>
      <div class="content">
        <div class="fresh_left">
          <div class="fre_ban">
            <div id="imgPlay1">
              <!--左边：分类商品轮播循环标签开始-->
              <ul class="imgs" id="actor1">
                <li v-for="x in firstListLeft">
                  <a  @click="toGoodsDetail(x)"><img :src="x.goodsImg" width="211" height="286" /></a>
                </li>

              </ul>
              <!--左边：分类商品轮播循环结束开始-->
              <div class="prevf">上一张</div>
              <div class="nextf">下一张</div>
            </div>
          </div>
          <div class="fresh_txt">
            <div class="fresh_txt_c">
              <a href="#">上衣</a><a href="#">卫衣</a><a href="#">西装</a><a href="#">羽绒服</a><a href="#">裤子</a><a href="#">夹克</a><a href="#">牛仔裤</a><a href="#">喇叭裤</a><a href="#">帽子</a><a href="#">鞋子</a>
            </div>
          </div>
        </div>
        <div class="fresh_mid">
          <!--分类商品循环标签开始-->
          <ul>
            <li v-for="x in firstListCenter" >

              <div class="name"><a href="#">{{x.goodsName}}</a></div>
              <div class="price">
                <font>￥<span>{{x.goodsPrice}}</span></font> &nbsp; 26R
              </div>

                <div class="img"><a @click="toGoodsDetail(x)" ><img :src="x.goodsImg" width="185" height="155" /></a></div>

            </li>

          </ul>
          <!--分类商品循环标签结束-->
        </div>
        <div class="fresh_right">
          <ul v-for="x in firstListRight">
            <li><a @click="toGoodsDetail(x)"><img :src="x.goodsImg" width="260" height="220" /></a></li>
          </ul>
        </div>
      </div>
      <!--End 男装 End-->

      <div class="content mar_20">
        <img src="/static/images/mban_1.jpg" width="1200" height="110" />
      </div>
      <!--Begin 美妆 Begin-->
      <div class="i_t mar_10">
        <span class="floor_num">2F</span>
        <span class="fl">美 <b>·</b> 装</span>

      </div>
      <div class="content">
        <div class="fresh_left">
          <div class="fre_ban">
            <div id="imgPlay2">
              <!--左边：分类商品轮播循环标签开始-->
              <ul class="imgs" id="actor2">
                <li v-for="x in secondListLeft">
                  <a  @click="toGoodsDetail(x)"><img :src="x.goodsImg" width="211" height="286" /></a>
                </li>

              </ul>
              <!--左边：分类商品轮播循环结束开始-->
              <div class="prevf">上一张</div>
              <div class="nextf">下一张</div>
            </div>
          </div>
          <div class="fresh_txt">
            <div class="fresh_txt_c">
              <a href="#">上衣</a><a href="#">卫衣</a><a href="#">西装</a><a href="#">羽绒服</a><a href="#">裤子</a><a href="#">夹克</a><a href="#">牛仔裤</a><a href="#">喇叭裤</a><a href="#">帽子</a><a href="#">鞋子</a>
            </div>
          </div>
        </div>
        <div class="fresh_mid">
          <!--分类商品循环标签开始-->
          <ul>
            <li v-for="x in secondListCenter" >

              <div class="name"><a href="#">{{x.goodsName}}</a></div>
              <div class="price">
                <font>￥<span>{{x.goodsPrice}}</span></font> &nbsp; 26R
              </div>

              <div class="img"><a @click="toGoodsDetail(x)"><img :src="x.goodsImg" width="185" height="155" /></a></div>

            </li>

          </ul>
          <!--分类商品循环标签结束-->
        </div>
        <div class="fresh_right">
          <ul v-for="x in secondListRight">
            <li><a @click="toGoodsDetail(x)"><img :src="x.goodsImg" width="260" height="220" /></a></li>
          </ul>
        </div>
      </div>
      <!--End 美妆 End-->

      <div class="content mar_20">
        <img src="/static/images/mban_1.jpg" width="1200" height="110" />
      </div>
      <!--Begin 女装 Begin-->
      <div class="i_t mar_10">
        <span class="floor_num">3F</span>
        <span class="fl">女 <b>·</b> 装</span>

      </div>
      <div class="content">
        <div class="fresh_left">
          <div class="fre_ban">
            <div id="imgPlay3">
              <!--左边：分类商品轮播循环标签开始-->
              <ul class="imgs" id="actor3">
                <li v-for="x in threeListLeft">
                  <a  @click="toGoodsDetail(x)"><img :src="x.goodsImg" width="211" height="286" /></a>
                </li>

              </ul>
              <!--左边：分类商品轮播循环结束开始-->
              <div class="prevf">上一张</div>
              <div class="nextf">下一张</div>
            </div>
          </div>
          <div class="fresh_txt">
            <div class="fresh_txt_c">
              <a href="#">上衣</a><a href="#">卫衣</a><a href="#">西装</a><a href="#">羽绒服</a><a href="#">裤子</a><a href="#">夹克</a><a href="#">牛仔裤</a><a href="#">喇叭裤</a><a href="#">帽子</a><a href="#">鞋子</a>
            </div>
          </div>
        </div>
        <div class="fresh_mid">
          <!--分类商品循环标签开始-->
          <ul>
            <li v-for="x in threeListCenter" >

              <div class="name"><a @click="toGoodsDetail(x)">{{x.goodsName}}</a></div>
              <div class="price">
                <font>￥<span>{{x.goodsPrice}}</span></font> &nbsp; 26R
              </div>

              <div class="img"><a @click="toGoodsDetail(x)" ><img :src="x.goodsImg" width="185" height="155" /></a></div>

            </li>

          </ul>
          <!--分类商品循环标签结束-->
        </div>
        <div class="fresh_right">
          <ul v-for="x in threeListRight">
            <li><a @click="toGoodsDetail(x)"><img :src="x.goodsImg" width="260" height="220" /></a></li>
          </ul>
        </div>
      </div>
      <!--End 女装 End-->

    </div>

    <Footer></Footer>
  </div>
</template>

<script >
  import Header from "../common/Header";
  import Footer from "../common/Footer";

  export default {
    name: "Index",
    components:{
      Header,
      Footer
    },
    data(){
       return{
          hotShop:[],//热卖产品
          firstListLeft:[],
          firstListCenter:[],
          firstListRight:[],
          secondListLeft:[],
          secondListCenter:[],
          secondListRight:[],
          threeListLeft:[],
          threeListCenter:[],
          threeListRight:[]
       }
    },
    methods:{
        loadHostShop(){//读取热卖产品
            const self = this;
            //1 发送ajax请求
            const http = this.$http.get("/server-goods-info/goods-info/goods",{params:{formId:0}});
            //2 请求回调
            http.then(function (rs) {
               console.log(rs)
                  if(rs.data.code==200){
                    self.hotShop = rs.data.data;
                  }
            })
        },
      loadThreeGoods(formId,goodsTypeId){//加载三个广告位数据
        const self = this;
        //1 发送ajax请求
        const http = this.$http.get("/server-goods-info/goods-info/goods/2",{params:{"formId":formId,"goodsTypeId":goodsTypeId}});
        //2 请求回调
        http.then(function (rs) {
          console.log(rs)
          if(rs.data.code==200){
            /*---1楼的数据---*/
              if(formId==2&&goodsTypeId==1) {
                self.firstListLeft = rs.data.data;
              }
              if(formId==1&&goodsTypeId==1){
                self.firstListCenter = rs.data.data;
              }
              if(formId==3&&goodsTypeId==1){
              self.firstListRight = rs.data.data;
             }
            /*---2楼的数据---*/
            if(formId==2&&goodsTypeId==4) {
              self.secondListLeft = rs.data.data;
            }
            if(formId==1&&goodsTypeId==4){
              self.secondListCenter = rs.data.data;
            }
            if(formId==3&&goodsTypeId==4){
              self.secondListRight = rs.data.data;
            }
            /*---3楼的数据---*/
            if(formId==2&&goodsTypeId==5) {
              self.threeListLeft = rs.data.data;
            }
            if(formId==1&&goodsTypeId==5){
              self.threeListCenter = rs.data.data;
            }
            if(formId==3&&goodsTypeId==5){
              self.threeListRight = rs.data.data;
            }
          }
        })
      },
      toGoodsDetail(x){
          //跳转到商品详情页面
          window.location.href="/goodsDetail";
          localStorage.setItem("x",JSON.stringify(x));

      }

    },
    mounted() {
      this.loadHostShop();
      this.loadThreeGoods(1,1);
      this.loadThreeGoods(2,1);
      this.loadThreeGoods(3,1);
      this.loadThreeGoods(1,4);
      this.loadThreeGoods(2,4);
      this.loadThreeGoods(3,4);
      this.loadThreeGoods(1,5);
      this.loadThreeGoods(2,5);
      this.loadThreeGoods(3,5);
    }

  }

</script>

<style scoped>
</style>
